<!-- eslint-disable no-unused-vars -->
<template>
  <el-affix :offset="0">
    <div class="common-layout"  style="line-height: 60px; min-width: 1500px; max-height: 60px; border-bottom: 0.5px solid #e9e9eb; background-color: #fff;" >
      <el-row class="row-bg" justify="space-between" align="middle">
        <el-col :span="5" style="margin-left:5vw">
          <img src="@/assets/img/logo.png" alt="" style="height: 35px;width: 35px;margin-top: -8px;">
          <span class="font" style="font-weight: 1000 !important;font-size: 20px;"><router-link to="/">兰亭书法</router-link></span>
        </el-col>
        <el-col :span="5">
          <el-input
          v-model="key"
          class="w-50 m-2"
          placeholder="请输入想要查询的汉字"
          :prefix-icon="search"
          @change="enter"
        />
        </el-col>
        <el-col :span="8">
          <el-row :gutter="5" justify="space-between" style="  cursor:pointer;">
            <el-col :span="4" :class="{activeType:active=='1'}" @click="toIndex">首页</el-col>
            <el-col :span="4" :class="{activeType:active=='2'}" @click="toLT">兰亭</el-col>
            <el-col :span="4" :class="{activeType:active=='3'}" @click="toKnowledge">书法百科</el-col>
            <el-col :span="4">
              <el-dropdown trigger="click" id="copybook">
                <span class="el-dropdown-link" :class="{activeType:active=='4'}">
                  字帖
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="toCopybook('liu')">刘炳森隶书字帖</el-dropdown-item>
                    <el-dropdown-item @click="toCopybook('zhang')">汉·张迁碑</el-dropdown-item>
                    <el-dropdown-item @click="toCopybook('wang')">王羲之《兰亭序》</el-dropdown-item>
                    <el-dropdown-item @click="toCopybook('zhao')">赵孟頫《松雪斋法书-大学》</el-dropdown-item>
                    <el-dropdown-item @click="toCopybook('mi')">《米芾行书习字帖》书法家之路</el-dropdown-item>
                    <el-dropdown-item @click="toCopybook('yan')">颜真卿《勤礼碑》实用速成大格集字帖</el-dropdown-item>
                    <el-dropdown-item @click="toCopybook('ou')">《九成宫醴泉铭》欧阳询楷书入门大字帖</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
            <el-col :span="4">
              <div class="toolbar">
                <template v-if="profile.token">
                  <el-dropdown trigger="click">
                  <span>{{ profile.userName }}
                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </span>
                  <!-- <el-icon style="margin-right: 8px; margin-top: 1px"><setting/></el-icon> -->
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="centerDialogVisible = true">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-dialog v-model="centerDialogVisible" title="确定登出？" width="30%" center style="padding:0px !important">
                    <template #footer>
                      <span class="dialog-footer" style="padding:0px !important">
                        <el-button @click="centerDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="logout">
                          确定
                        </el-button>
                      </span>
                    </template>
                </el-dialog>
                </template>
                <template v-else><div @click="toLogin" style="cursor:pointer;">请登录</div></template>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </el-affix>
</template>
<script>
import { useStore } from 'vuex'
import { computed, ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { userLogout } from '@/api/user'
import Message from '@/components/library/Message'
import { removeToken } from '@/utils/auth'
export default {
  name: 'AppTopnav',
  setup () {
    const key = ref('')
    const search = Search
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    let profile = computed(() => {
      return store.state.user.profile
    })
    const active = computed(() => {
      return store.state.home.active
    })

    const centerDialogVisible = ref(false)
    function enter (e) {
      router.push({ path: '/search', query: { key: e } })
    }
    function toLogin () {
      router.push({ path: '/login' })
    }
    function toKnowledge () {
      store.dispatch('home/setActive', '3')
      router.push({ path: '/knowledge' })
    }
    function toIndex () {
      store.dispatch('home/setActive', '1')
      router.push({ path: '/' })
    }
    function toLT () {
      store.dispatch('home/setActive', '2')
      router.push({ path: '/lanting' })
    }
    function toCopybook (title) {
      store.dispatch('home/setActive', '4')
      router.push({ path: '/copybook', query: { title: title } })
    }
    function logout () {
      userLogout().then(res => {
        // console.log(res)
        profile = {}
        router.replace({ path: '/login' }).catch(() => {})
        localStorage.setItem('linting-client-pc-store', '')
        localStorage.setItem('linting-client-pc-store-vux', '')
        removeToken()
        Message({ type: 'success', text: '退出成功' })
        // location.reload()
        // router.go(0)
      })
    }
    onMounted(() => {
      // store.dispatch('home/setActive', '1')
      key.value = route.query.key
    })

    return { profile, search, enter, key, toLogin, logout, centerDialogVisible, active, toKnowledge, toIndex, toLT, toCopybook }
  }
}
</script>
  <style lang="less">
  #copybook{
    margin-top: 20px;
  }
.el-header {
  position: relative;
  background-color: var(--el-color-info-light-9);
  color: var(--el-text-color-primary);
}
.el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-info-light-9);
}
.el-menu {
  border-right: none;
}
.el-main {
  padding: 0;
}
.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.font{
  // font-size: 1vw;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.activeType{
  color: #b19770;
  // border-bottom: 2px solid#b19770;
}
.el-dialog--center{
  padding: 0 !important;
}
.el-dialog--center .el-dialog__body{
  padding: 0 !important;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: #333 !important;
  // display: flex;
  // align-items: center;
}
</style>
